<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="/resources/js/tdt.js?r=1223"></script>

    <title>视频监控</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
        #container{
            height:100%;min-height:810px;width:100%;
            position: sticky !important;
            margin: -10px 0 0 -20px;
            bottom: 0px;}
        #r-result{width:100%;}
        button.actvie{
            background-color: #0080ff;
        }
    </style>
</head>
<body>

<div id="container" style="left:-20px;width:104%"></div>
<div id="searchPanel" style="position: absolute;top:20px;z-index:999;background-color: #fff;margin-left-left: 20px;padding:3px">
    <input type="text" id="keyWord" value=""/>
    <br/>
    <!-- 提示词面板 -->
    <div id="promptDiv" class="prompt"></div>
    <!-- 统计面板 -->
    <div id="statisticsDiv" class="statistics"></div>
    <!-- 建议词面板 -->
    <div id="suggestsDiv" class="suggests"></div>
    <!-- 公交提示面板 -->
    <div id="lineDataDiv" class="lineData"></div>
    <!-- 搜索结果面板 -->
    <div id="resultDiv" class="result">
        <div id="searchDiv"></div>

    </div>
</div>


</body>
</html>

<script type="text/javascript">
    var map;
    var zoom = 17;
    var deviceList;
    var markers = new Array();
    var deviceList;
    $(function () {

        initMap();
        initData();
    });

    function initMap() {
        var imageURL = "http://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=611c56de6afcba460edbcbbbd3009445}";
        //创建自定义图层对象
        var lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
        map = new T.Map('container', {
            layers: [lay],
            attributionControl: false,
            inertia: false
        });

        map.setMapType(TMAP_HYBRID_MAP);
        map.centerAndZoom(new T.LngLat(118.56903,37.57433), zoom);
        var ctrl = new T.Control.MapType();
        //添加控件
        map.addControl(ctrl);
        var searchConfig = {
            pageCapacity: 10,	//每页显示的数量
            onSearchComplete: localSearchResult	//接收数据的回调函数
        };
        //创建搜索对象
        localsearch = new T.LocalSearch(map, searchConfig);
        $("#keyWord").keyup(function () {
            bounds = T.LngLatBounds(new T.LngLat(117.84348,37.47577),new T.LngLat(118.1456,37.32085));
            localsearch.searchInBounds(document.getElementById('keyWord').value,bounds);
        });
        $("#keyWord").blur(function () {
            setTimeout("clearSearchPanel ()","800");
        });


    }
    function initData(){
        var data = getData();
        var id = data.id;
        if(null2empty(id) !==""){
            $("input[name='id']").val(id);
            $.ajax({
                url:"/admin/map/listForMapByCompanyId.do",
                data:{'companyId':id},
                type:'post',
                async:false,
                dataType:'json',
                success:function(data){
                    console.log(data);
                    if(data.success){
                       var company = data.data.company;
                       var videoList = data.data.videoList;
                       var jlbList = data.data.jlbList;
                        setMapRangeImage(company);
                       var   mVideoList = getDeviceList(videoList,"video");
                       var   mJlbList = getDeviceList(jlbList,"jlb");
                       deviceList = mJlbList.concat(mVideoList);
                       debugger;
                        clearMarkers();
                        addMarkers();

                    }
                }
            });

        }

    }
    function setMapRangeImage(company) {
        var  bLongitude =company.bLongitude;
        var bLatitude = company.bLatitude;
        var eLongitude= company.eLongitude;
        var eLatitude= company.eLatitude;
        var mapImage= company.mapImage;
        if(!isNullOrUndefined(bLongitude) &&
            !isNullOrUndefined(bLatitude)&&
            !isNullOrUndefined(eLongitude)&&
            !isNullOrUndefined(eLatitude)
           ){
            map.setMaxBounds(new T.LngLatBounds(new T.LngLat(bLongitude,bLatitude), new T.LngLat(eLongitude, eLatitude)));

            if( !isNullOrUndefined(mapImage)){
                var bd = new T.LngLatBounds(
                    new T.LngLat(bLongitude, bLatitude),
                    new T.LngLat(eLongitude, eLatitude));
                var imageOverLay = new T.ImageOverlay(mapImage, bd, {
                    opacity: 1,
                    alt: ""
                });
                map.addOverLay(imageOverLay);
            }

        }
    }


    function getDeviceList(list,type) {
        var _deviceList =new Array();
        $(list).each(function (index,item) {
            var device = item;
            device["type"] = type;
            _deviceList.push(device);
        });
        return _deviceList;

    }
    function clearMarkers() {
        var allOverlay = map.getOverlays();
        for (var i = 0; i < allOverlay.length ; i++){
            if(allOverlay[i]["type"]=='device'){
                allOverlay[i].remove();
            }
        }
        //清空数组
        markers.length =0;
    }
    function addMarkers() {
        for(var i=0, pointsLen = deviceList.length; i<pointsLen; i++) {
            var iconUrl = getTypeIconUrl(deviceList[i].type);
            var icon = new T.Icon({
                iconUrl: iconUrl,
                iconSize: new T.Point(25, 25),
                iconAnchor: new T.Point(25, 25)
            });
            var marker = new T.Marker(new T.LngLat(deviceList[i].longitude, deviceList[i].latitude), {title: deviceList[i].name,icon: icon});
            marker.addEventListener("click", MarkerClick);
            marker.device = deviceList[i];

            markers.push(marker);
            map.addOverLay(marker);
        }


    }

    function getTypeIconUrl(type) {
        var  iconUrl = "";
        if("video" == type){
            iconUrl = "/resources/images/web-cam.png";
        }else if("jlb" == type){
            iconUrl = "/resources/images/jlb.png";
        }
        return iconUrl;
    }

    function MarkerClick(e) {
        if("video"== e.target.device.type){
            showVideo(e.target.device.videoCode);
        }else if("jlb"== e.target.device.type){
            var infoWin1 = new T.InfoWindow();
            var  sContent = buildContentForJlb(e.target.device);
            infoWin1.setContent(sContent);
            e.target.openInfoWindow(infoWin1);
        }

    }

    function buildContentForJlb(device) {
       var sContent ="<div>净积流量:"+device.jjll+"</div>"+
       "<div>瞬时流量:"+device.ssll+"</div>";
       return sContent;
    }

    function showVideo(videoCode) {
        var url = "/html/security/video_play.html?videoCode="+videoCode;
        window.open(url,"_blank");
    }
</script>